<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my_user</title>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element.js"></script>
</head>
<body>
<div id="box">
    <div><h1>我的关注列表</h1></div>
    <!--  表格-->
    <div>
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="用户名"
                        width="1300">
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button
                                :key="scope.$index"
                                :type="followStatus[scope.$index] ? 'success' : 'danger'"
                                @click="handleDelete(scope.$index, scope.row)">
                            {{ followStatus[scope.$index] ? '取消关注' : '加入关注' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <!--    分页-->
    <div class="block" style="text-align: center;margin-top: 20px">
        <el-pagination
                layout="prev, pager, next"
                :total="50">
        </el-pagination>
    </div>
</div>
<script>
    new Vue({
        el: '#box',
        data() {
            return {
                tableData: [{
                    name: '小程',
                }, {
                    name: '小胡'
                }, {
                    name: '小向'
                }, {
                    name: '小赵'
                }, {
                    name: '小植'
                }],
                followStatus: {} // 存储每个按钮的关注状态
            }
        },
        methods: {
            handleDelete(index, row) {
                // 首次点击时，使用 this.$set 添加响应式属性
                if (!this.followStatus.hasOwnProperty(index)) {
                    this.$set(this.followStatus, index, false); // 关键代码
                }
                // 切换状态
                this.followStatus[index] = !this.followStatus[index];
            }
        }
    })
</script>
</body>
</html>